{% extends '__base__.html' %}

{% block title %}manage - {{table}}{% endblock %}

{% block content %}


<div class="row" id="vm" style="margin-top: 20px">
    <div class="panel panel-default">
        <ul class="nav nav-tabs">
            <li :class="{active: '{{table}}'===key}" v-for="(key, _) of models"><a :href="'' + key" v-text="key"></a></li>
        </ul>
        <table class="table table-striped table-hover table-responsive" id="manage-table">
            <thead>
                <tr>
                    <th v-for="title of fields" v-text="title"></th>
                    <th class="col-sm-2">创建时间</th>
                    <th class="col-sm-1">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item of items | limitBy page.limit" track-by="id">
                    <td v-for="(key, field) of fields">
                        <a  v-if="'{{table}}'==='blogs' && key==='name'" :href="'/blog/'+item.id" v-text="item.name"></a>
                        <span v-else v-text="item[$key]"></span>
                    </td>
                    <td v-text="item.created_at.toDateTime('yyyy-MM-dd')"></td>
                    <td >
                        <a :href="'{{table}}/edit?id='+item.id"><span class="fa fa-edit"></span></a>
                        <a href="#" v-on:click="delete_item(item)"><span class="fa fa-trash"></span></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <nav class="text-center">
        <ul class="pagination">
            <li :class="{'active': page.index===1}">
                <a href="#" v-on:click="gotoPage(1)" v-text="1"></a>
            </li>
            <li class="disabled" v-if="(page.index - 1) > 3"><span>...</span></li>

            <li :class="{'active': page.index===i}" v-for="i in page.last | filterBy vaildPage">
                <a href="#" v-on:click="gotoPage(i)" v-text="i"></a>
            </li>

            <li class="disabled" v-if="(page.last - page.index) > 3"><span>...</span></li>
            <li :class="{'active': page.index===page.last}" v-if="page.last > 1">
                <a href="#" v-on:click="gotoPage(page.last)" v-text='page.last'></a>
            </li>
        </ul>
    </nav>
</div>

{% endblock %}

{% block script %}
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/manage.js"></script>
{% endblock %}